<template>
    <div class="con">
        <div class="user">
            <!-- <el-input style="width:20%" placeholder="请输入用户名" v-model="tableDataInfo.userName" clearable></el-input>
            <el-input style="width:20%" placeholder="请输入性别" v-model="tableDataInfo.sex"></el-input>
            <el-input style="width:20%" placeholder="请输入生日" v-model="tableDataInfo.birthday"></el-input> -->
            <!-- <el-input style="width:20%" placeholder="请输入头像" v-model="tableDataInfo.avatarUrl"></el-input> -->
            <!-- <el-button style="width: 20%;" type="primary" @click="add()">增加</el-button> -->
            <el-table class="zzy1" :data="isselect
                ? selectData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
                : allData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
                <el-table-column prop="userName" label="用户名" fixed>
                </el-table-column>
                <el-table-column prop="sex" label="性别" fixed>
                </el-table-column>
                <el-table-column prop="birthday" label="生日" fixed>
                </el-table-column>
                <el-table-column label="头像" fixed>
                    <template slot-scope="scope">
                        <img :src=scope.row.avatarUrl alt="这是图片" style="width: 80px;height: 80px;"
                            @click="show(tableData, scope.$index)">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="select" size="mini" placeholder="输入关键字搜索" style="width: 60%;height: 30%;" />
                        <el-button @click="selectUser(scope.$index)" type="primary"
                            style="width: 40%;height: 30%;">搜索</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button-group aligin:right>
                            <el-button @click="edit(scope.$index, scope.row)">编辑</el-button>
                            <el-button @click="del(scope.$index)" style="background: red;color: white;">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 缩略图 -->
            <div>
                <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width='30%'>
                    <img width="100%" :src=dialogImageUrl alt="">
                </el-dialog>
            </div>
            <el-pagination background layout="prev, pager, next" :total="totalPage" @current-change="currentPage">
            </el-pagination>
            <div v-show="ifshow">
                修改用户名<el-input style="width:36%" v-model="dataEdit.userName"></el-input>
                修改性别<el-input style="width:36%" v-model="dataEdit.sex"></el-input>
                修改生日<el-input style="width:36%" v-model="dataEdit.birthday"></el-input>
                <!-- 修改头像<el-input style="width:36%" v-model="dataEdit.avatarUrl"></el-input> -->
            </div>
        </div>
    </div>
</template>
    
<script>
import axios from 'axios'
export default {
    data() {
        return {
            text: '',
            ifshow: false,
            tableData: [],
            selectData: [],
            tableDataInfo: {
                userName: '',
                sex: '',
                birthday: '',
                avatarUrl: ''
            },
            dataEdit: {
                userName: '',
                sex: '',
                birthday: '',
                avatarUrl: ''
            },
            searchResult: [],
            pageSizes: [1, 2, 3, 4],
            pageSize: 5,
            totalPage: 1,
            search: '',
            drawer: false,
            isselect: false,
            select: '',
            allData: [],
            dialogVisible: false,
            dialogImageUrl: '',
            pageNo: 1,//表格页码
            pageCount: 5,//数据数
            currentNo: 1,//当前页码
        }
    },
    created() {
        this.searchResult = this.tableData //存储
    },
    methods: {
        // 显示缩略图
        show(file, index) {
            // console.log(file,index);
            this.dialogVisible = true;
            // console.log(file[index].avatarUrl);
            this.dialogImageUrl ='data:image/jpeg/jpg;base64,' +file[index].avatarUrl;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 显示
        async put() {
            let result = await this.$axios.post("http://localhost:3000/putuser");
            this.tableData = result.data.List
            // console.log(this.tableData);
        },
        //增
        async add() {
            await this.$axios.post('http://localhost:3000/adduser',
                {
                    userName: this.tableDataInfo.userName,
                    sex: this.tableDataInfo.sex,
                    birthday: this.tableDataInfo.birthday,
                    avatarUrl: this.tableDataInfo.avatarUrl,
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert('添加成功')
                    }
                    if (res.data.code == 400) {
                        alert('用户名已存在')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 删
        async del(index) {
            // console.log(tableData);
            await this.$axios.post('http://localhost:3000/deluser',
                {
                    userName: this.tableData[index].userName
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert('删除成功')
                    }
                    if (res.data.code == 202) {
                        alert('删除失败')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 改
        async edit(index, row) {
            this.ifshow = !this.ifshow
            this.dataEdit = row
            if (this.ifshow == false) {
                await this.$axios.post('http://localhost:3000/edituser',
                    {
                        userName: this.tableData[index].userName,
                        sex: this.tableData[index].sex,
                        birthday: this.tableData[index].birthday,
                        avatarUrl: this.tableData[index].avatarUrl,
                        userId: this.tableData[index].userId
                    })
                    .then(res => {
                        console.log(res.data);
                        if (res.data.code == 200) {
                            alert('编辑成功')
                        }
                        if (res.data.code == 202) {
                            alert('编辑失败')
                        }
                    })
                    .catch(err => {
                        console.log('操作失败' + err);
                    })
            }
        },
        // 查
        async selectUser(index) {
            this.isselect = !this.isselect
            await this.$axios.post('http://localhost:3000/seluser',
                {
                    userName: this.select
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        this.selectData = res.data.List
                        for (var i = 0; i < this.selectData.length; i++) {
                        this.selectData[i].avatarUrl = 'data:image/jpeg/jpg;base64,' + this.selectData[i].avatarUrl;
                        // console.log(this.allData[i].avatarUrl);
                    }
                    }
                    if (res.data.code == 400) {
                        this.selectData = res.data.List
                        
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        // 分页
        //获取前10条数据
        async getData(index) {
            this.pageNo = index || this.pageNo
            await this.$axios.post('http://localhost:3000/pageuser',
                { page: this.pageNo, pageSize: this.pageCount })
                .then(res => {
                    // console.log(res.data.List[0].avatarUrl);
                    this.allData = res.data.List
                    // this.avatarUrl='data:image/jpeg/jpg;base64,'+res.data.List
                    for (var i = 0; i < this.allData.length; i++) {
                        this.allData[i].avatarUrl = 'data:image/jpeg/jpg;base64,' + this.allData[i].avatarUrl;
                        // console.log(this.allData[i].avatarUrl);
                    }
                }).catch(error => {
                    console.log(error);
                })
        },
        //当前页数据
        currentPage(val) {
            this.currentNo = val;
            console.log(this.currentNo)
            this.getData(this.currentNo)
        },
        //获取序号
        indexMethod(index) {
            return (this.currentNo - 1) * this.pageCount + index + 1;
        },
        //获取总页数
        async getPageTotal() {
            await this.$axios.get('http://localhost:3000/getUserData')
                .then(res => {
                    // console.log(res.data.List);
                    this.tableData = res.data.List;
                    // console.log(this.tableData.length);
                    this.totalPage = Math.ceil(this.tableData.length / this.pageCount) * 10;
                    // console.log(this.totalPage);
                }).catch(error => {
                    console.log(error)
                })
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
    },
    mounted() {
        this.put();
        this.getData();
        this.getPageTotal();
    },
}
</script>
    
<style>
.con {
    height: 1000px;
}

.user {
    width: 100%;
    line-height: 30px;
}

.zzy {
    height: 100%;
}

.djx1 {
    float: right;
    width: 50px;
    height: 30px;
    margin-top: 20px;
}
</style>